<template>
  <div class="container">
    <div class="grid-container">
      <div class="grid-item spanning-item">
        <div class="centered-content">Item 1 (Spanning)</div>
      </div>
      <template v-for="item in 15" :key="item + 1">
        <div class="grid-item" v-if="item !== 6 && (item < 7 || item > 10)">
          Item {{ item + 1 }}
        </div>
        <div v-else-if="item === 6" class="grid-item split-container item-7">
          <div class="split-left">
            <div class="split-left-top">Item 7 - Left Top</div>
            <div class="split-left-bottom">Item 7 - Left Bottom</div>
          </div>
          <div class="split-right">
            <div class="split-right-top">
              <div class="sub-item">Item 7 - Right Top 1</div>
              <div class="sub-item">Item 7 - Right Top 2</div>
              <div class="sub-item">Item 7 - Right Top 3</div>
            </div>
            <div class="split-right-bottom">
              <div class="sub-item">Item 7 - Right Bottom 1</div>
              <div class="sub-item">Item 7 - Right Bottom 2</div>
              <div class="sub-item">Item 7 - Right Bottom 3</div>
            </div>
          </div>
        </div>
        <div v-else class="grid-item editable-container">
          <!-- 只有Item 10 (item === 9) 显示2行，其他显示6行 -->
          <div class="editable-row" v-for="row in item === 9 ? 2 : 6" :key="row">
            <textarea
              class="editable-cell"
              :value="getEditableContent(item - 1, row - 1)"
              @input="
                setEditableContent(
                  item - 1,
                  row - 1,
                  $event.target ? ($event.target as HTMLTextAreaElement).value : ''
                )
              "
              placeholder="Enter text here..."
            ></textarea>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'

  // 创建可编辑内容的响应式数据
  const editableContent = ref<Array<Array<string>>>([])

  // 获取可编辑内容
  const getEditableContent = (itemIndex: number, rowIndex: number) => {
    return editableContent.value[itemIndex]?.[rowIndex] || ''
  }

  // 设置可编辑内容
  const setEditableContent = (itemIndex: number, rowIndex: number, value: string) => {
    if (!editableContent.value[itemIndex]) {
      editableContent.value[itemIndex] = []
    }
    editableContent.value[itemIndex][rowIndex] = value
  }

  // 初始化可编辑内容
  onMounted(() => {
    // 为 Item 8-11 (索引 7-10) 创建 6 行内容
    for (let i = 7; i <= 10; i++) {
      const itemRows = []
      for (let j = 0; j < 6; j++) {
        itemRows.push(`Item ${i + 1} - Row ${j + 1}`)
      }
      editableContent.value[i] = itemRows
    }
  })
</script>

<style scoped>
  .container {
    padding: 1rem;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
  }

  .grid-item {
    background-color: #f0f0f0;
    padding: 1rem;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-height: 100px;
  }

  .spanning-item {
    background-color: #e0e0e0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    grid-row: span 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .split-container {
    display: flex;
    height: 100%;
  }

  .item-7 {
    min-height: 300px;
    padding: 0;
  }

  .split-left,
  .split-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .split-left-top,
  .split-left-bottom,
  .split-right-top,
  .split-right-bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sub-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
  }

  .sub-item:last-child {
    border-bottom: none;
  }

  .split-left-top {
    border-bottom: 1px solid #ddd;
  }

  .split-right-top {
    border-bottom: 1px solid #ddd;
  }

  .split-right {
    border-left: 1px solid #ddd;
  }

  .editable-container {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 300px;
  }

  .editable-row {
    flex: 1;
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 0;
  }

  .editable-row:last-child {
    border-bottom: none;
  }

  .editable-cell {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    padding: 0.5rem;
    font-family: inherit;
    font-size: inherit;
  }

  .editable-cell:focus {
    outline: 1px solid #007bff;
    background-color: #fff;
  }
</style>
